<template>
  <div class="content-container" style="position: relative">
    <img class="system-logo-icon" src="@/assets/logo.png"></img>
    <div style="height: 10px"></div>
    <div class="panel">
      <div class="page-corner"></div>
         <img src="@/assets/zct.png"/>
        <div class="title">{{data.zcbt00}}</div>
        <div class="content" v-html="data.zcnr00"></div>
      </div>
  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {policyApi} from "@/api";

export default {
  name:"policy-detail",
  components:{
    ReturnBtn
  },
  data(){
    return {
      data:{
        zcxh00:"",
        zcbt00:"",
        zcsjsj:"",
        zcnr00:""
      }
    }
  },
  mounted() {
    this.data.zcxh00=this.$route.query.zcxh00
    this.queryPolicyInfo()

  },
  methods:{

    queryPolicyInfo(){
      policyApi.queryPolicyInfo({zcxh00: this.data.zcxh00}).then((res) => {
        this.data.zcbt00 = res.data.zcbt00
        this.data.zcnr00 = res.data.zcnr00
        this.data.zcsjsj = res.data.zcsjsj

      }).catch(()=>{

      })
    }
  }
}
</script>

<style lang="scss" scoped >

.panel{
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 1);
    width: 60%;
    margin: 0px auto 0px auto;
    background-color: #226ac4;
    padding: 0px 50px 10px 50px;
    min-height: calc(100vh - 60px);
     position: relative;
    .page-corner{
      position: absolute;
      right: 0;/*靠右*/
      top: 0;/*靠上*/
      width: 100px;/*宽*/
      height: 70px;/*高*/
      background: linear-gradient(35deg, #EEE 40%, rgba(137, 137, 137, 1) 50%);/*35度角渐变色填充，角度根据宽高比来决定*/
      filter: drop-shadow(0px 0px 8px #1f1f1f);/*阴影*/
     }
  .title{
    font-size: 30px;
    color: #FFFFFF;
    font-weight: bolder;
  }
  .time{
    text-align: left;
    padding-left: 50px;
    margin-top: 10px;
  }
  .content{

    color: #FFFFFF;
    font-size: 20px;
    padding-top: 20px;
    margin-top: 20px;
    text-align: left;
    overflow-y: auto;

  }
}

</style>
